<script setup lang="ts">

import {ref,defineProps,defineEmits} from "vue";
import {
    useMessage,
    FormRules,
    UploadCustomRequestOptions,
} from 'naive-ui'

import {addSlides} from "../../../api/slide.ts";
import {uploadToken} from "../../../api/base.ts";
import axios from "axios";

const loading =ref(false)
const message = useMessage()
interface ModelType {
    title: string | ''
    img: string | null
    url:  string | ''
    status:Number | string
}
const props =defineProps({
    showModal:{
        type:Boolean,
        default:false
    }
})
const emit = defineEmits([])
const showModal = ref(false)

const model= ref<ModelType>({
    title: '',
    img: null,
    url: '',
    status:null
})
// const model = modelRef
const rules: FormRules = {
    title: [
        {
            required: true,

            message: '请输入标题'
        }
    ],
    img: [
        {
            // required: true,
            // message:'请上传图片'
        }
    ],
    url:[
        {
            required: true,
            message: '请输入跳转链接',
        }
    ],
    status: [
        {
            required: true,
            message: '请选择状态',
        }
    ]

}
const formRef = ref()
const  slideSubmit =  async (e) => {
    e.preventDefault()

        formRef.value.validate(err => {
            if(err){
                loading.value = true
                console.log(err)
            }else {
                addSlides(model.value). then(res => {
                    console.log(model.value)
                    console.log(res)
                    emit('changeModal',false)
                    message.success('添加成功')
                    emit('reloadTable')
                })


            }
        })


}

// 自定义图片上传


const customRequest= ({file,action,headers,onFinish,onError}) => {

    uploadToken().then(res => {
        loading.value = true

        // 组装上传的参数
        const formDate = new FormData
        //  随机生成图片名称
        const fileName = `${Date.now()}${Math.floor(Math.random()*1000)}.${file.name.split('.').pop()}`
        console.log(fileName)

        formDate.append('key',fileName)
        formDate.append('OSSAccessKeyId',res.data.accessid)
        formDate.append('policy',res.data.policy)
        formDate.append('Signature',res.data.signature)
        formDate.append('file',file.file)

        axios.post(res.data.host,formDate,{
            headers:{
                'Content-Type':'multipart/form-data'
            },


        }).then(ress=>{

            model.value.img= fileName
            imgUrl.value=`${res.data.host}/${fileName}`
            onFinish(fileName)
            loading.value=false
        }).catch(err=>{
        })
    })
}
const imgUrl = ref('')
</script>

<template>
    <div>
        <n-modal
                v-model:show="props.showModal"
                @update:show = "$emit('changeModal',false)"
                :mask-closable="true"
        >
            <n-card
                    style="width: 600px"
                    title="添加轮播图"
                    :bordered="false"
                    size="huge"
                    role="dialog"
                    aria-modal="true"
            >
                <template #header-extra>
                    <span @click="$emit('changeModal',false)" style="cursor:pointer">x</span>
                </template>
                <n-form ref="formRef" :model="model" :rules="rules">
                    <n-form-item path="title" label="标题">
                        <n-input v-model:value='model.title' placeholder="请输入标题"/>
                    </n-form-item>
                    <n-form-item path="url" label="跳转URL">
                        <n-input
                                v-model:value="model.url"
                                type="text"
                                placeholder="请输入跳转url"

                        />
                    </n-form-item>
                    <n-form-item label="是否启用" path="status">
                        <n-radio-group v-model:value="model.status" name="status">
                            <n-space>
                                <n-radio :value="0">
                                    否
                                </n-radio>
                                <n-radio :value="1">
                                    是
                                </n-radio>

                            </n-space>
                        </n-radio-group>
                    </n-form-item>
                    <n-form-item label="图片上传" path="img">

                        <n-upload
                                :custom-request="customRequest"
                                :name="model.img"
                                name="img"
                                :loading="loading"

                        >
                            <n-button v-if="!imgUrl">上传图片</n-button>
                            <n-image
                                    v-else
                                    width="100"
                                    height="100"
                                    :src="imgUrl"
                            />

                        </n-upload>

                    </n-form-item>


                    <n-row :gutter="[0, 24]">
                        <n-col :span="24">
                            <div style="display: flex; justify-content: flex-end">
                                <n-button
                                        round
                                        type="primary"
                                        @click="slideSubmit"
                                        :loading="loading"
                                >
                                    提交
                                </n-button>
                            </div>
                        </n-col>
                    </n-row>
                </n-form>
<!--                <template #footer>-->
<!--                    尾部-->
<!--                </template>-->
            </n-card>
        </n-modal>
    </div>
</template>

<style scoped>

</style>